<template>
	<view class="content">
		<!--  <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper> -->
		<view class="swiper">
			<image v-if="detail.img_url" :src="$domain.api+detail.img_url" mode="aspectFill"></image>
		</view>

		<view class=" bgWhite  mt12 plr20 ptb12">
			<text style="font-weight: 600;font-size: 32rpx;color: #000000;line-height: 54rpx;">{{detail.title}}</text>
			<view class="align-center justify-start baozhang">
				<view class="">
					保
				</view>
				交易保障
				<view class="" style="margin-left: 50rpx;">
					退
				</view>
				不支持退款
			</view>
		</view>
		<view class="bgWhite mlr15 plr15 ptb18 radius8 mt12">
			<view class="align-center" style="color: #666666;">
				<image style="width: 34rpx;height: 34rpx;margin-right: 20rpx;" src="../../static/images/times.png">
				</image> {{detail.start_date}}-{{detail.end_date}}
			</view>
			<view class="mt18 justify-between align-center" style="color: #666666;">
				<view class="align-center">
					<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;margin-left: -4rpx;"
						src="../../static/images/add.png"></image>
					{{detail.address}}
				</view>
				<image src="/static/images/dh.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="mt18" style="font-weight: 700;font-size: 44rpx;color: #0368FF;">
				<image style="width: 30rpx;height: auto;margin-right: 20rpx;" mode="widthFix"
					src="../../static/images/money.png"></image>
				{{detail.unitprice}}
			</view>
		</view>
		<view class="moduleTitle ft16 ">详细介绍 </view>
		<view class="    mt25 " style="line-height: 56rpx;color: #3d3d3d;">
			<uv-parse :content="detail.content" :tagStyle="style"></uv-parse>
		</view>
		<view class="" style="height:  100rpx;">
		</view>
		<view class="justify-between align-center paybtn">
			<view class="freebtn align-center justify-center" @click="collect">
				<image src="/static/images/collect.png" class="mr6" mode=""></image>
				收藏
			</view>
			<view @click="pay" class="onlinePay">在线报名</view>
		</view>
		<uv-popup ref="popup" :bgColor="none" :closeable="true">
			<view class="popcontent posRelative flex-col justify-center align-center">
				<view class="poptitle">
					提示
				</view>
				<view class="flex1 align-center">
					成为会员才可查看!
				</view>
				<view class="tobuy" @click="toBuy">
					购买会员
				</view>
			</view>
		</uv-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [],
				chain: false,
				value: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imgList: [],
				id: "",
				detail: {},


				style: {
					img: "max-width:100%"
				},


				userInfo: uni.getStorageSync('userInfo'),
				user_id: uni.getStorageSync('userId'),
				isVip: false


			}
		},

		onLoad(opt) {
			if (opt.id) this.id = opt.id

			this.getMain()
		},
		onShow() {
			this.$api.checkExpired({
				userId: uni.getStorageSync('userId'),
			}).then(res => {

				if (res.code == 200) {
					this.isVip = true

				} else {
					this.isVip = false
				}
			})
		},
		methods: {
			async getUserInfo() {
				const {
					data
				} = await this.$api.userinfo({
					user_id: this.user_id
				})

				this.userInfo = data
			},
			async getMain() {
				const {
					data,
					code
				} = await this.$api.getActDetails({
					id: this.id
				})
				if (code == 200) {
					console.log(data)
					this.detail = data
					this.detail.content = this.detail.content.replaceAll('<img src="',
						'<img src="https://xcx.zzbwd.com')

				}
			},
			collect() {
				this.$api.savecollect({
					categoryId: 2,
					userId: uni.getStorageSync('userId'),
					itemId: this.id
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '收藏成功'
					})
				})
			},
			pay() {

				if (this.isVip) {
					uni.navigateTo({
						url: "/pages/actSign/index?price=" + this.detail.unitprice + '&id=' + this.id
					})
				} else {

				}

			},
			async getOrderStatus(orderno) {
				const data = await this.$api.checkactOrder({
					out_trade_no: orderno
				})
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages/actorderDetail/index?orderno=' + orderno
					})
				}

			},
			toBuy(){
				uni.navigateTo({
					url:'/pages/vipApply/index'
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.notice {
		padding: 26rpx 48rpx;
		background: #FCF3EE;
		border: 2rpx solid #F3D6C6;
		font-size: 28rpx;
		color: #F3915B;

		image {
			margin-left: 86rpx;
			width: 60rpx;
		}
	}

	.paybtn {

		position: fixed;
		bottom: 0;
		width: 100%;

		background-color: #fff;
		font-size: 32rpx;
		color: #FFFFFF;

		view {
			flex: 1;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			color: #3D3D3D;

		}

		.onlinePay {
			line-height: 94rpx;
			text-align: center;
			color: #fff;
			height: 94rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.moduleTitle {
		font-weight: 400;
		color: #0C3EC0;
		line-height: 54rpx;
		display: inline-block;
		margin: 30rpx 0 10rpx 30rpx;
		position: relative;
	}

	.moduleTitle::before {
		position: absolute;
		clear: both;
		content: '';
		left: 0;
		bottom: -20rpx;
		margin: auto;
		right: 0;
		width: 134rpx;
		height: 8rpx;
		background: #4172F1;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.swiper {
		image {
			width: 100%;
			height: 390rpx;
		}
	}

	.content {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.baozhang {
		font-size: 28rpx;
		color: #0368FF;
		line-height: 28rpx;
		margin-top: 24rpx;

		view {
			width: 36rpx;
			height: 36rpx;
			background: #0368FF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 36rpx;
			text-align: center;
			margin-right: 14rpx;
		}
	}
	.popcontent {
		width: 638rpx;
		height: 388rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #3D3D3D;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;
	
		.poptitle {
			height: 106rpx;
			line-height: 106rpx;
			width: 100%;
			border-bottom: 2rpx solid #D8D8D8;
		}
	
		.tobuy {
			height: 108rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 24rpx 24rpx;
			width: 100%;
			color: #fff;
			line-height: 108rpx;
	
		}
	}
</style>